<template>
	<w-layout showNavbar navTitle="创建赏屋" :navTitleColor="publicStyles['--color-t1']" background="url('/static/image/bk.png') no-repeat"
		navBackgroundColor="transparent" :scrollTop="page.scrollTop" :navScrollColor="publicStyles['--color-bk']">
		<template #default>
			<view class="container">
				<view class="public-box-8 fc px-50 pt-50 pb-50" style="min-height: 1300rpx;">
					<view class="fc-ac">
						<image style="width: 128rpx;height: 128rpx;border-radius: 50%;" :src="userStore.user_info.headimg" mode=""></image>
						<view class="mt-20">
							创建人：{{userStore.user_info.nickname}}
						</view>
					</view>
					<up-gap height="20"></up-gap>
					<view class="fr-ac px-20 pb-30 u-border-bottom mt-30" style="border-color: var(--gray-line) !important;">
						<view class="op-90">
							房间名称
						</view>
						<view class="flex-1 ml-40">
							<input v-model="formData.title" class="w-100 color" type="text" placeholder="请输入" />
						</view>
					</view>
					<view class="fr-ac px-20 pb-30 u-border-bottom mt-30" style="border-color: var(--gray-line) !important;">
						<view class="op-90">
							活动介绍
						</view>
						<view class="flex-1 ml-40">
							<input v-model="formData.description" class="w-100 color" type="text" placeholder="请输入" />
						</view>
					</view>
					<view class="fr-ac px-20 pb-30 u-border-bottom mt-30" style="border-color: var(--gray-line) !important;">
						<view class="op-90">
							进屋口令
						</view>
						<view class="flex-1 ml-40">
							<input v-model="formData.command" class="w-100 color" type="text" placeholder="请输入" />
						</view>
					</view>
					<view class="fr-ac px-20 pb-30 u-border-bottom mt-30" style="border-color: var(--gray-line) !important;">
						<view class="op-90">
							开奖时间
						</view>
						<view class="flex-1 ml-40">
							<uni-datetime-picker type="datetime" :border="false" placeholder="请选择开奖时间" v-model="formData.open_time" />
						</view>
					</view>
					
					
					<view class="fr-ac px-20 mt-30" style="border-color: var(--gray-line) !important;">
						<view class="op-90">
							赏品
						</view>
						<view class="flex-1 ml-40">
							<view class="fs-24">
								<text class="op-70">已选</text>
								<text class="color mx-5">{{selectGoods}}件</text>
								<text class="op-70">,价值</text>
								<text class="color">￥{{selectGoodsPrice}}</text>
							</view>
						</view>
					</view>
					<view class="px-20 mt-40">
						<view class="gap-30" style="display: grid;grid-template-columns: repeat(3,1fr);">
							<view class="w-100" style="position: relative;" v-for="(item,index) in formData.goods_info" :key="index">
								<image class="w-100" :src="item.goodslist_imgurl" mode="widthFix"></image>
								<image @click="deleteGoods(item,index)" style="width: 40rpx;height: 40rpx;position: absolute;top: 0;right: 0;" class="w-100" src="/static/icon/public/delete.png" mode="widthFix"></image>
								<view class="t-c fs-24">
									x{{item.count}}
								</view>
							</view>
							<view @click="goAddChoose()" class="w-100" style="position: relative;">
								<image class="w-100" src="/static/icon/public/add-file.png" mode="widthFix"></image>
								<view class="fs-24 color" style="position: absolute;top: 105rpx;left: 50%;transform: translateX(-50%);">
									添加
								</view>
							</view>
						</view>
					</view>
					
					
					<view @click="submit" class="public-btn-3 transition px-30 py-25  t-c mt-auto mb-40">
						<view class="text-color-b fs-32">
							立即创建
						</view>
					</view>
				</view>
				
			</view>
		</template>
	</w-layout>
</template>

<script setup>
	import {
		ref,
		reactive,
		onMounted,
		computed,
		nextTick
	} from 'vue'
	import {
		storeToRefs
	} from 'pinia'
	import {
		onLoad, onPageScroll
	} from '@dcloudio/uni-app'
	import {
		useAppStore
	} from '@/store/app'
	import {
		useColorStore
	} from '@/store/color'
	import {
		add_room
	} from '@/utils/request/api';
	import {
		useUserStore
	} from '@/store/user'
	const userStore = useUserStore()
	const appStore = useAppStore()
	const colorStore = useColorStore()
	const {
		publicStyles
	} = storeToRefs(colorStore)
	onLoad(async(options) => {
		formData.open_time = getDate({
			format: true
		})
		console.log(formData.open_time,'formData.open_time')
	})
	onMounted(() => {
		appStore.loadingHandler(false)
	})
	onPageScroll((e)=>{
		page.scrollTop = e.scrollTop
	})
	const page = reactive({
		scrollTop:0
	})
	
	const formData = reactive({
		title:'',
		description:'',
		command:'',
		open_time: '',
		goods_info:[]
	})
	
	function goAddChoose(){
		uni.navigateTo({
			url:`/pages/benefit/create_choose`,
			events:{
				// 为指定事件添加一个监听器，获取被打开页面传送到当前页面的数据
				chooseEvent: function(data) {
					console.log(data);
					formData.goods_info = data
				}
			},
		})
	}
	
	function getDate(type) {
		const date = new Date();
		let year = date.getFullYear();
		let month = date.getMonth() + 1;
		let day = date.getDate();

		if (type === 'start') {
			year = year - 60;
		} else if (type === 'end') {
			year = year + 2;
		}
		month = month > 9 ? month : '0' + month;
		day = day > 9 ? day : '0' + day;
		return `${year}-${month}-${day}`;
	}
	
	
	async function submit(){
		if(!formData.title){
			return uni.$u.toast('请输入房间名称')
		}
		if(!formData.description){
			return uni.$u.toast('请输入活动介绍')
		}
		if(!formData.command){
			return uni.$u.toast('请输入进屋口令')
		}
		if(!formData.open_time){
			return uni.$u.toast('请输入开奖时间')
		}
		if(!formData.goods_info.length){
			return uni.$u.toast('请选择赏品')
		}
		const goods_info = JSON.stringify(formData.goods_info.map(item => {
			return {
				goods_type:1,
				prize_code:item.prize_code,
				number:item.count
			}
		}))
		const res = await add_room({
			...formData,
			goods_info
		})
		uni.$u.toast('创建成功')
		setTimeout(() => {
			uni.navigateBack({delta:1})
		},1000)
	}
	
	
	const TimePicker = reactive({
		show:false,
		value:Date.now()
	})
	
	function deleteGoods(item,index){
		formData.goods_info.splice(index,1)
	}
	
	const selectGoods = computed(()=>{
		let num = 0
		formData.goods_info.forEach(item => {
			num += item.count
		})
		return num
	})
	const selectGoodsPrice = computed(()=>{
		let num = 0
		formData.goods_info.forEach(item => {
			num += item.count * item.goodslist_money
		})
		return num.toFixed(2)
	})
</script>

<style lang="scss">
	.shadow {
		box-shadow: 2rpx 2rpx 12rpx var(--shadow);
	}
	.color{
		color: var(--color);
	}

	.container {
		width: 100%;
		min-height: 100%;
		position: relative;
		overflow: hidden;
		box-sizing: border-box;
		padding: 50rpx;
		
	}
	
	.login-btn {
		color: white !important;
		background: var(--color) !important;
		border-radius: 12rpx !important;
	}
</style>